<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ImageData Contour Example</title>
  <style>
    .container {
      display: flex;
      gap: 20px;
      padding: 20px;
    }
    .canvas-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    canvas {
      border: 1px solid #333;
    }
    .controls {
      margin: 20px;
    }
    button, input {
      margin: 0 10px 10px 0;
      padding: 6px 12px;
    }
  </style>
</head>
<body>
  <div class="controls">
    <h3>等值线提取控制</h3>
    <input type="file" id="imageUpload" accept="image/*">
    <br>
    <label>阈值: <input type="number" id="threshold" value="128" min="0" max="255"></label>
    <label>通道: 
      <select id="channel">
        <option value="gray">灰度</option>
        <option value="r">红色</option>
        <option value="g">绿色</option>
        <option value="b">蓝色</option>
        <option value="a">透明</option>
      </select>
    </label>
    <label><input type="checkbox" id="enableClosing" checked> 闭合等值线</label>
    <button id="extractBtn">提取等值线</button>
  </div>

  <div class="container">
    <div class="canvas-container">
      <h4>原始图像</h4>
      <canvas id="sourceCanvas" width="400" height="300"></canvas>
    </div>
    <div class="canvas-container">
      <h4>等值线结果</h4>
      <canvas id="targetCanvas" width="400" height="300"></canvas>
    </div>
  </div>

  <script type="module">
    // 导入库（根据实际路径调整）
    import { 
      generateContour, 
      convertImageDataToGrid 
    } from './dist/index.mjs';

    // 获取DOM元素
    const sourceCanvas = document.getElementById('sourceCanvas');
    const targetCanvas = document.getElementById('targetCanvas');
    const sourceCtx = sourceCanvas.getContext('2d');
    const targetCtx = targetCanvas.getContext('2d');
    const imageUpload = document.getElementById('imageUpload');
    const thresholdInput = document.getElementById('threshold');
    const channelSelect = document.getElementById('channel');
    const enableClosingInput = document.getElementById('enableClosing');
    const extractBtn = document.getElementById('extractBtn');

    // 加载示例图像
    function loadDefaultImage() {
      const img = new Image();
      img.crossOrigin = 'anonymous';
      img.src = 'https://picsum.photos/400/300'; // 示例图像
      img.onload = () => {
        sourceCanvas.width = img.width;
        sourceCanvas.height = img.height;
        targetCanvas.width = img.width;
        targetCanvas.height = img.height;
        sourceCtx.drawImage(img, 0, 0);
      };
    }

    // 处理图像上传
    imageUpload.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (!file) return;
      
      const reader = new FileReader();
      reader.onload = (event) => {
        const img = new Image();
        img.onload = () => {
          sourceCanvas.width = img.width;
          sourceCanvas.height = img.height;
          targetCanvas.width = img.width;
          targetCanvas.height = img.height;
          sourceCtx.drawImage(img, 0, 0);
        };
        img.src = event.target.result;
      };
      reader.readAsDataURL(file);
    });

    // 提取等值线并绘制
    extractBtn.addEventListener('click', () => {
      try {
        // 清除目标画布
        targetCtx.clearRect(0, 0, targetCanvas.width, targetCanvas.height);
        // 复制原始图像作为背景
        targetCtx.drawImage(sourceCanvas, 0, 0, targetCanvas.width, targetCanvas.height);
        
        // 获取图像数据
        const imageData = sourceCtx.getImageData(
          0, 0, sourceCanvas.width, sourceCanvas.height
        );
        
        // 转换为网格数据
        const channel = channelSelect.value;
        const { data, width, height } = convertImageDataToGrid(imageData, channel);
        
        // 生成等值线
        const threshold = parseInt(thresholdInput.value);
        const contours = generateContour(data, width, height, threshold, {
          enableClosing: enableClosingInput.checked,
          enableSparse: true
        });
        
        // 绘制等值线
        targetCtx.strokeStyle = '#ff0000';
        targetCtx.lineWidth = 2;
        
        if (Array.isArray(contours)) {
          contours.forEach(([[x1, y1], [x2, y2]]) => {
            targetCtx.beginPath();
            targetCtx.moveTo(x1, y1);
            targetCtx.lineTo(x2, y2);
            targetCtx.stroke();
          });
        }
        
        console.log(`成功提取 ${contours.length / 2} 条等值线`);
      } catch (error) {
        console.error('提取等值线失败:', error);
      }
    });

    // 初始化加载默认图像
    loadDefaultImage();
  </script>
</body>
</html>
